<template>
    <my-overlay>
        <div id="turntable"></div>
        <my-prompt :show="promptShow" @confirm="onConfirm">
            <div class="prize_eggs">
                <img class="card_prize" :src="prizeImg[resultIndex]" alt="奖品">
                <span>恭喜获得{{ prizeAmount }}{{ prizeName[resultIndex] }}</span>
            </div>
        </my-prompt>
    </my-overlay>
</template>

<script>
import Turntable from '@/games/turntable'
import { mapState } from 'vuex'

export default {
    name: 'turntable',
    data () {
        return {
            prizeName: ['个金币', '个彩蛋币', '块钱', '个转盘券'], // 奖品名称, 对应 type
            prizeImg: [
                require('@/assets/images/textures/material/turntable/prize_gold.png'),
                require('@/assets/images/textures/material/turntable/prize_egg.png'),
                require('@/assets/images/textures/material/turntable/prize_red_packet.png'),
                require('@/assets/images/textures/material/turntable/prize_ticket.png'),
            ],
            promptShow: false,
            prizeAmount: 0,
            resultIndex: 0, // 得奖奖品标记, 对应 返回的 type
        }
    },
    computed: {
        // state 状态
        ...mapState([
            'userInfo'
        ]),
		// 每秒收益
		goldIncreasing: (state) => {
			let gold = 0
			state.birdList.forEach( item => {
				gold += item.income || 0
			})
			return gold
		}
    },
    mounted () {
        this.getData()
    },
    methods: {
        async getData () {
            let res = await this.$ajax('turntableList')
            if (!res) return false
            // 创建 大转盘, 传递奖品数组
            let game = new Turntable(res)
            game.listen({
                onClose: () => {
                    this.$router.back(-1)
                },
                onResult: ({ type, amount }) => {
                    // console.log(info)
                    this.resultIndex = Number(type)
                    this.prizeAmount = amount
                    this.promptShow = true
                    let ticket = this.userInfo.ticket - 1
                    // type 0: 金币, 1: 彩蛋币, 2: 现金, 3: 转盘券
                    if ( type === '3' ) {
                        ticket = ticket + amount
                    } else if ( type === '0' ) {
                        this.$store.commit('updateUserInfo', {
                            gold: Number(this.userInfo.gold) + amount
                        })
                    }
                    // 更新票券
                    this.$store.commit('updateUserInfo', {
                        ticket: ticket >= 0 ? ticket : 0
                    })
                }
            })
        },
        onConfirm () {
            // 抽中的是彩蛋币, 进行广告
            if (this.resultIndex === 1) {
                this.$nativeApi._watchAD(() => {
                    this.promptShow = false
                })
                return false
            }
            this.promptShow = false
        }
    }
}
</script>
<style lang="less" scoped>
#turntable {
    height: 100vh;
    width: 100vw;
}
/deep/ #prompt {
    height: 600 / @widthScale;
    #prompt_top {
        .prompt_title {
            margin-top: 17 / @widthScale;
            height: 52 / @widthScale
        }
    }
    .prize_eggs {
        .flex;
        flex-direction: column;
        align-items: center;
        > img.icon_prize {
            width: 80 / @widthScale;
            margin-bottom: 46 / @widthScale;
        }
        > img.card_prize {
            margin-bottom: 46 / @widthScale;
            margin-top: -100 / @widthScale;
            width: 180 / @widthScale;
        }
        > span {
            color: #6C2127;
            font-weight: bold;
            font-size: 0.9rem;
        }
    }
    #prompt_confirm {
        margin-top: 65 / @widthScale;
    }
}
</style>